<template>
  <view class="page">
    <accountHeader title="我的车辆" switchTo="/pages/account/index,/pages/home/home">
      <template #right>
        <view v-if="isShowAddBtn">
          <u-button @click="carAdd">添加车辆</u-button>
        </view>
      </template>requestUserInfo
    </accountHeader>
		
    <view class="list" v-if="carlist.length!=0">
      <view class="list_item" v-for="item in carlist" :key="item.id" @click="setDefault(item)">
        <view class="vehicleModel">{{item.vehicleModel}}</view>
        <view>{{item.licencePlate}}</view>
        <view class="active" v-show="item.selectedState == 1">默认车辆</view>
        <view v-if="item.image != '' ">
          <image style="width: 100%;height: 500rpx" :src="imgUrl+item.image"></image>
        </view>
        <u-empty mode="data" v-else textSize="30rpx" iconSize="320" text="暂无汽车图片" style="margin-top: 40rpx;">
        </u-empty>
      </view>
    </view>

    <u-empty mode="list" v-else textSize="30rpx" iconSize="320" text="空空如也1~~" style="margin-top: 40rpx;">
    </u-empty>
  </view>
</template>

<script>
	import store from '@/store/index.js';
	import accountHeader from "@/components/acountHeader.vue"
	import { carLists, defaultCar } from '@/config/api/car.js'
	export default{
		components:{
			accountHeader
		},
		data() {
			return{
				imgUrl: uni.$u.http.config.baseURL,
				carlist: "",
				isShowAddBtn: false
			}
		},
		
		methods:{
			getCarList () {
			  carLists().then(res => {
			    this.carlist = res.rows
			  })
			},
			
			setDefault (item) {
			  defaultCar({ id: item.id }).then(res => {
			    if (res.code == 200) {
			      uni.$u.toast("设置成功")
			      this.getCarList()
			      store.dispatch("setActiveCar", item)
			    }
			  })
			  uni.setStorageSync("activeCarId", item.id)
			},
			
			carAdd () {
			  uni.navigateTo({
			    url: "/pages/bindingCar/bindingCar"
			  })
			}
		},
		
		onLoad(option){
		  this.isShowAddBtn = option.status == 0 ? false : true
		  this.getCarList()
		}
	}
</script>


<style scoped>
.page {
  margin-top: 170rpx;
  padding: 40rpx;
}

/* 默认车辆 */
.active {
  text-align: center;
  font-size: 24rpx;
  width: 20%;
  border-radius: 30rpx;
  padding: 3rpx 10rpx;
  background-color: #f2f2f2;
}

.list_item {
  border-bottom: 1px solid #f2f2f2;
}

/* 车辆型号 */
.vehicleModel {
  color: #d0d0d0;
}

/* 列表项 */
.list_item > view {
  margin-top: 20rpx;
}
</style>